<template>
  <el-dialog
    :title="!dataForm.id ? '新增' : '修改'"
    :close-on-click-modal="false"
    :visible.sync="visible">
    <el-form :model="dataForm" :rules="dataRule" ref="dataForm" @keyup.enter.native="dataFormSubmit()" label-width="80px">
      <el-form-item label="任务名称" prop="attendanceName">
        <el-input v-model="dataForm.attendanceName" placeholder="任务名称"></el-input>
      </el-form-item>
      <el-form-item label="星期多选">
      <el-checkbox :indeterminate="isIndeterminate" v-model="checkAll" @change="handleCheckAllChange">全选</el-checkbox>
      <el-checkbox-group
        v-model="checkedDay"
        @change="handleCheckedDayChange"
        >
        <el-checkbox v-for="day in week" :label="day" :key="day">{{day}}</el-checkbox>
      </el-checkbox-group>
      </el-form-item>
      <el-form-item label="签到时间范围">
        <el-col>
          起始日期时刻为{{attendanceTime[0]}}，结束日期时刻为 {{attendanceTime[1]}}
        </el-col>
        <el-date-picker
          v-model="attendanceTime"
          type="datetimerange"
          align="right"
          @change="getTime"
          value-format="yyyy-MM-dd HH:mm:ss"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          :default-time="['9:00:00', '17:00:00']">
        </el-date-picker>
      </el-form-item>
      <el-form-item label="地理经度" prop="attendanceAddressJing">
        <el-col :span="15" v-if="dataForm.attendanceAddressJing.length > 3">
          <el-input v-model="dataForm.attendanceAddressJing" placeholder="地理经度" size="medium"></el-input>
        </el-col>
        <el-col :span="15" v-else>
          <el-input v-model="center.lng" placeholder="地理经度" size="medium"></el-input>
        </el-col>
      </el-form-item>
      <el-form-item label="地理纬度" prop="attendanceAddressWei">
          <el-col :span="15"  v-if="dataForm.attendanceAddressWei.length > 3">
          <el-input v-model="dataForm.attendanceAddressWei" placeholder="地理纬度" size="medium"></el-input>
        </el-col>
          <el-col :span="15"  v-else>
          <el-input v-model="center.lat" placeholder="地理纬度" size="medium"></el-input>
        </el-col>
      </el-form-item>
      <el-popover
        placement="right"
        width="400"
        trigger="click">
        <baidu-map :center="center"
                   @click="syncCenterAndZoom"
                   :zoom="16"
                   class="bm-view"
                   ak="gVqRwNndVMzxUnOg0uisGuPPgiaL4Mv7">
        </baidu-map>
        <el-button icon="el-icon-search" slot="reference">打卡地点选择</el-button>
      </el-popover>
      <el-form-item label="指定部门" prop="departId">
        <el-input v-model="dataForm.departId" placeholder="指定打卡规则适用的部门"></el-input>
      </el-form-item>
      <el-form-item label="信息接收" prop="attendanceAdministrators">
        <el-input v-model="dataForm.attendanceAdministrators" placeholder="指定员工打卡信息接收管理员"></el-input>
      </el-form-item>
    </el-form>
    <span slot="footer" class="dialog-footer">
      <el-button @click="visible = false">取消</el-button>
      <el-button type="primary" @click="dataFormSubmit()">确定</el-button>
    </span>
  </el-dialog>
</template>

<script>
  // import BaiduMap from 'vue-baidu-map/components/Map/Map.vue'
  // import BaiduMap from '../../../node_modules/vue-baidu-map/components/Map/Map.vue'
  import API from '@/api'
  const dayOfweek = ['星期一', '星期二', '星期三', '星期四', '星期五', '星期六', '星期日']
  export default {
    components: {
    },
    data () {
      return {
        checkAll: false,
        isIndeterminate: true,
        visible: false,
        checkedDay: [],
        week: dayOfweek,
        attendanceTime: [],
        center: {
          lng: 113.117108,
          lat: 27.8219
        },
        dataForm: {
          attendanceName: '',
          attendanceWeek: '',
          attendanceTimeBegin: '',
          attendanceTimeEnd: '',
          attendanceAddressJing: '',
          attendanceAddressWei: '',
          attendanceAdministrators: '',
          departId: ''
        },
        dataRule: {
          attendanceName: [
            { required: true, message: '任务名称不能为空', trigger: 'blur' }
          ],
          attendanceTimeBegin: [
            { required: true, message: '签到时间开始不能为空', trigger: 'blur' }
          ],
          attendanceTimeEnd: [
            { required: true, message: '签到时间结束不能为空', trigger: 'blur' }
          ],
          attendanceAddressJing: [
            { required: true, message: '经度不能为空', trigger: 'blur' }
          ],
          attendanceAddressWei: [
            { required: true, message: '纬度不能为空', trigger: 'blur' }
          ]
        }
      }
    },
    methods: {
      init (id) {
        this.dataForm.id = id || 0
        this.visible = true
        this.$nextTick(() => {
          this.$refs['dataForm'].resetFields()
          if (this.dataForm.id) {
            API.adtrule.info(this.dataForm.id).then(({data}) => {
              if (data && data.code === 0) {
                this.dataForm.attendanceName = data.rule.attendanceName
                this.dataForm.attendanceWeek = data.rule.attendanceWeek
                this.checkedDay = data.rule.attendanceWeek.split(',')
                this.dataForm.attendanceTimeBegin = data.rule.attendanceTimeBegin
                this.dataForm.attendanceTimeEnd = data.rule.attendanceTimeEnd
                this.attendanceTime[0] = data.rule.attendanceTimeBegin
                this.attendanceTime[1] = data.rule.attendanceTimeEnd
                this.dataForm.attendanceAddressJing = data.rule.attendanceAddressJing
                this.dataForm.attendanceAddressWei = data.rule.attendanceAddressWei
                this.dataForm.attendanceAdministrators = data.rule.attendanceAdministrators
                this.dataForm.departId = data.rule.departId
              }
            })
          }
        })
      },
      // 表单提交
      dataFormSubmit () {
        this.$refs['dataForm'].validate((valid) => {
          if (valid) {
            var params = {
              'attendanceName': this.dataForm.attendanceName,
              'attendanceWeek': this.dataForm.attendanceWeek.toString(),
              'attendanceTimeBegin': this.dataForm.attendanceTimeBegin,
              'attendanceTimeEnd': this.dataForm.attendanceTimeEnd,
              'attendanceAddressJing': this.dataForm.attendanceAddressJing,
              'attendanceAddressWei': this.dataForm.attendanceAddressWei,
              'attendanceAdministrators': this.dataForm.attendanceAdministrators,
              'departId': this.dataForm.departId
            }
            var tick = !this.dataForm.id ? API.adtrule.add(params) : API.adtrule.update(params)
            tick.then(({data}) => {
              if (data && data.code === 0) {
                this.$message({
                  message: '操作成功',
                  type: 'success',
                  duration: 1500,
                  onClose: () => {
                    this.visible = false
                    this.$emit('refreshDataList')
                  }
                })
              } else {
                this.$message.error(data.msg)
              }
            })
          }
        })
      },
      // 全选
      handleCheckAllChange (val) {
        this.checkedDay = val ? dayOfweek : []
        this.isIndeterminate = false
      },
      // 选择和取消
      handleCheckedDayChange (value) {
        let checkedCount = value.length
        this.checkAll = checkedCount === this.week.length
        this.isIndeterminate = checkedCount > 0 && checkedCount < this.week.length
        this.dataForm.attendanceWeek = value
      },
      // 经纬度选取
      syncCenterAndZoom (e) {
        const {lng, lat} = e.target.getCenter()
        this.center.lng = lng
        this.center.lat = lat
        this.$notify({
          title: '当前位置已选取',
          message: '经度：' + this.center.lng + '纬度：' + this.center.lat,
          type: 'success'
        })
        this.dataForm.attendanceAddressJing = lng
        this.dataForm.attendanceAddressWei = lat
      },
      // 时间获取
      getTime () {
        this.dataForm.attendanceTimeBegin = this.attendanceTime[0]
        this.dataForm.attendanceTimeEnd = this.attendanceTime[1]
      }
    }
  }
</script>
<style>
  .block{
    padding: 25px
  }
  .bm-view {
    width: 100%;
    height: 300px;
  }
</style>
